<!-- -->
<template>
  <div class='footer'>
    <div class="top">
      <div class="ul-ft">
        <ul>
          <li>
            <a class='con'>电话:(0750)3296113</a>
            <a class='con'>邮编：529020</a>
            <a class='con'>邮箱：wyudzb@wyu.edu.cn</a>
          </li>
          <li>
            <a class='con'>传真:(0750)3358395</a>
            <a class='con'>信访专线:(0750)3296210</a>
            <a class='con'>校长信箱: wyuxfyx@wyu.edu.cn</a>
          </li>
          <li>
            <a class='con'>全日制本科招生咨询:</a>
            <a class='con'>(0750)3296263，3296265</a>
            <a class='con'>全日制研究生招生咨询:(0750)3296951</a>
          </li>
        </ul>
      </div>
      <div class="qr">
        <div class="item">
          <div class="pic">
            <img src="@/assets/images/wyuewm.jpg" alt="">
          </div>
          <div class="infog">官方微信</div>
        </div>
        <div class="item">
          <div class="pic">
            <img src="@/assets/images/vrx.jpg" alt="">
          </div>
          <div class="infog">VR校园</div>
        </div>
        <div class="item">
          <div class="pic">
            <img src="@/assets/images/wuyidaxueshipinhao.png" alt="">
          </div>
          <div class="infog">视频号</div>
        </div>
      </div>
    </div>
    <div class="bot">
      <p>京ICP备 13018369号 电话010-1649492134</p>
      <p>
        <span>联系我们</span>
        <span>合作伙伴</span>
        <span>用户协议</span>
        <span>隐私协议</span>
      </p>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

</script>

<style lang='scss' scoped>
.footer {
  .top {
    padding: 1.822vw 13.54vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f2f2f2;
    .ul-ft {
      width: 70%;
      ul {
        display: flex;
        font-size: 13px;
        justify-content: space-between;
        li {
          display: flex;
          flex-direction: column;
          a {
            margin: 5px 0;
          }
        }
      }
    }
    .qr {
      width: 20%;
      display: flex;
      flex-wrap: wrap;
      font-size: 13px;
      // justify-content: center;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        margin-right: 20px;
        margin-bottom: 10px;
        .pic {
          width: 63px;
          height: 63px;
        }
      }
    }
  }
  .bot {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12vw;
    background-color: #cae2fc;
    font-size: 14px;
    span {
      margin: 0 5px;
    }
  }
}
</style>
